import React from 'react'

function BoilingVerdict(props) {
    if (props.celsius >= 100) {
        return <p>The water would boil</p>
    }
    return <p>The water would not boil</p>
}

const scaleNames = {
  c: 'Celsius, 摄氏度',
  f: 'Fahrenheit， 华氏度',
}


class StateImprovement extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          temperature: '',
        }
    }
    handleChange(e) {
      this.props.onTemperatureChange(e.target.value);
      // this.setState({temperature: e.target.value});
    }
    render() {
      const { temperature, scale } = this.props;
      console.log(temperature);
      
      return <div>
        <fieldset>
          <legend>Enter temperature in {scaleNames[scale]}</legend>
          <input type="text" value={temperature} onChange={this.handleChange.bind(this)}/>
          <BoilingVerdict celsius={parseFloat(temperature)} />
        </fieldset>  
      </div>;
      
    }
  }


  export default StateImprovement;